<template>
  <div>
    <!-- 脑袋 -->
    <div class="header">
      <!-- 左头部 -->
      <div class="header-left">
        <img src="https://flowbite.com/docs/images/logo.svg" alt="">
        <p>{{ settingData.blogName }}</p>
      </div>
      <!-- 中间导航 -->
      <div class="header-middle">
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1"><router-link to="/about/index" style="margin: 0 20px;">首页</router-link></el-menu-item>
          <el-menu-item index="2"><router-link to="/about/class" style="margin: 0 20px;">分类</router-link></el-menu-item>
          <el-menu-item index="3"><router-link to="/about/tag" style="margin: 0 20px;">标签</router-link></el-menu-item>
          <el-menu-item index="4"><router-link to="/about/file" style="margin: 0 20px;">归档</router-link></el-menu-item>
        </el-menu>

      </div>
      <!-- 右方搜索登录 -->
      <div class="header-right">
        <input class="search" type="text">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" @click.prevent="goToLogin">
            登录<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">进入后台</el-dropdown-item>
            <el-dropdown-item command="b">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- <a href="" @click.prevent="goToLogin">登录</a> -->

    </div>

    <!-- 内容显示 区域 -->
    <div class="content">
      <!-- 子组件显示左区域 -->
      <div class="content-left">
        <router-view></router-view>
      </div>
      <!-- 子组件显示右区域 -->
      <div class="content-right">
        <!-- 登录用户显示 全部页面都有 -->
        <div class="user">
          <img :src="settingData.avatar" style="width: 80px;height:80px;border-radius: 80%;">
          <h2>{{ settingData.author }}</h2>
          <p>{{ settingData.introduction }}</p>
        </div>
        <!-- 分类 仅首页存在 -->
        <router-view name="indexclass" class="content-class"></router-view>
        <!-- 标签 仅首页存在 -->
        <div class="content-tags">
          <router-view name="indextags"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getBlogSetting()
  },
  data() {
    return {
      activeIndex2: '1',
      settingData: {},
    }
  },
  methods: {
    // 登录接口
    goToLogin() {
      this.$router.push('/login');
    },
    // 获取用户数据
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    async getBlogSetting() {
      const res = await this.$axios.post('http://47.104.167.34:9110/api/blog/setting/detail');
      if (res.data.success) {
        this.settingData = res.data.data;
        console.log(this.settingData);

      } else {
        this.$message.error(`获取失败：${res.data.message || '未知错误'}`);
      }
    },
    // 进入后台接口
    handleCommand() {
      this.$router.push('/backend');
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
  margin: 0 auto;
  height: 70px;
  background-color: white;
  display: flex;
}

.header-left {
  width: 30%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-middle {
  width: 40%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-right {
  widows: 30%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search {
  widows: 100px;
  height: 30px;
  border-radius: 8px;
}

a {
  text-decoration: none;
  color: black;
}

.content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
}

.content-left {
  width: 75%;
}

.content-right {
  padding: 20px 0;
  width: 25%;
}

.user {
  width: 300px;
  height: 200px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
}

.content-class {
  width: 300px;
  background-color: white;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>